<!-- # CE - camunda-admin-ui/client/scripts/pages/tenantEdit.html -->
<section ng-cloak>
  <aside>
    <ul>
      <li ng-class="activeClass('tab=tenant')">
        <a href="#/tenants/{{ tenant.id | escape }}?tab=tenant">{{ 'TENANTS_INFORMATION' | translate }}</a>
      </li>
      <li ng-class="activeClass('tab=groups')">
        <a href="#/tenants/{{ tenant.id | escape }}?tab=groups">{{ 'TENANTS_GROUPS' | translate }}</a>
      </li>
      <li ng-class="activeClass('tab=users')">
        <a href="#/tenants/{{ tenant.id | escape }}?tab=users">{{ 'TENANTS_USERS' | translate }}</a>
      </li>
    </ul>
  </aside>

  <div class="section-content">
    <form ng-show="show('tenant')"
          class="form-horizontal"
          name="editTenantForm"
          cam-widget-loader
          loading-state="{{ tenantLoadingState }}">
      <div class="h3">{{ tenant.name }}</div>

      <div class="form-group">
        <label class="control-label col-sm-4 col-md-2"
               for="inputName">{{ 'TENANTS_TENANT_NAME' | translate }}</label>

        <div class="col-sm-8 col-md-10">
          <input id="inputName"
                 name="tenantName"
                 class="form-control"
                 type="text"
                 ng-model="tenant.name"
                 novalidate
                 required
                 ng-disabled="!availableOperations.update" />

          <p class="text-danger"
             ng-show="editTenantForm.tenantName.$error.required">
            {{ 'TENANTS_NAME_REQUIRED' | translate }}
          </p>
        </div>
      </div>

      <div class="form-group"
           ng-show="availableOperations.update">
        <div class="col-sm-8 col-sm-offset-4 col-md-10 col-md-offset-2 text-right">
          <button type="submit"
                  class="btn btn-primary"
                  ng-disabled="!canSubmit(editTenantForm, 'tenant')"
                  ng-click="updateTenant()">{{ 'TENANTS_UPDATE_TENANT' | translate }}</button>
        </div>
      </div>
    </form>

    <form class="form-horizontal"
          ng-show="show('tenant') && availableOperations.delete">
      <div class="h4">{{ 'TENANTS_DELETE_TENANT' | translate }}</div>

      <div uib-alert class="alert alert-danger">
        <strong>{{ 'TENANTS_WARNING' | translate }}</strong> {{ 'TENANTS_DELETING_TENANT_UNDONE' | translate }}
      </div>

      <div class="text-right">
        <button type="submit"
                class="btn btn-danger"
                ng-click="deleteTenant()">
          {{ 'TENANTS_DELETE_TENANT' | translate }}
        </button>
      </div>
    </form>

    <div ng-show="show('users')">
      <div class="h4">{{ 'TENANTS_TENANT_USERS' | translate }}</div>

      <div cam-widget-loader
           loading-state="{{ userLoadingState }}"
           text-empty="{{ translate('TENANTS_NO_USERS', { tenant: tenant.name }) }}">
        <table class="cam-table">
          <thead cam-sortable-table-header
                 default-sort-by="userId"
                 default-sort-order="asc"
                 sorting-id="admin-sorting-tenants-users"
                 on-sort-change="onUsersSortingChanged(sorting)"
                 on-sort-initialized="onUsersSortingInitialized(sorting)">
            <tr ng-if="canSortUserEntries">
              <th cam-sortable-table-column
                  sort-by-property="userId">{{ 'USERS_ID' | translate }}</th>
              <th cam-sortable-table-column
                  sort-by-property="firstName">{{ 'USERS_FIRSTNAME' | translate }}</th>
              <th cam-sortable-table-column
                  sort-by-property="lastName">{{ 'USERS_LASTNAME' | translate }}</th>
            </tr>
            <tr ng-if="!canSortUserEntries">
              <th>{{ 'USERS_ID' | translate }}</th>
              <th>{{ 'USERS_FIRSTNAME' | translate }}</th>
              <th>{{ 'USERS_LASTNAME' | translate }}</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="user in tenantUserList">
              <td><a ng-href="#/users/{{ user.id | escape }}">{{ user.id }}</a></td>
              <td>{{ user.firstName }}</td>
              <td>{{ user.lastName }}</td>
            </tr>
          </tbody>
        </table>
      </div><!-- /cam-widget-loader -->

      <ul uib-pagination ng-if="tenantUserPages.total > tenantUserPages.size"
                  class="pagination-sm"

                  ng-model="tenantUserPages.current"
                  ng-change="pageChange(tenantUserPages.current)"

                  total-items="tenantUserPages.total"
                  items-per-page="tenantUserPages.size"
                  max-size="7"

                  boundary-links="true"

                  next-text="&rsaquo;"
                  last-text="&raquo;"
                  previous-text="&lsaquo;"
                  first-text="&laquo;"></ul>

    </div>

    <div ng-show="show('groups')">
      <div class="h4">{{ 'TENANTS_TENANT_GROUPS' | translate }}</div>

      <div cam-widget-loader
           loading-state="{{ groupLoadingState }}"
           text-empty="{{ translate('TENANTS_NO_GROUPS', { tenant: tenant.name }) }}">
        <table class="cam-table">
          <thead cam-sortable-table-header
                 default-sort-by="name"
                 default-sort-order="asc"
                 sorting-id="admin-sorting-tenants-groups"
                 on-sort-change="onGroupsSortingChanged(sorting)"
                 on-sort-initialized="onGroupsSortingInitialized(sorting)">
            <tr>
              <th cam-sortable-table-column
                  sort-by-property="name">{{ 'TENANTS_NAME' | translate }}</th>
            </tr>
          </thead>
          <tbody>
          <tr ng-repeat="group in tenantGroupList">
            <td><a ng-href="#/groups/{{ group.id | escape }}">{{ group.name }}</a></td>
          </tr>
          </tbody>
        </table>
      </div><!-- /cam-widget-loader -->

      <ul uib-pagination ng-if="tenantGroupPages.total > tenantGroupPages.size"
                  class="pagination-sm"

                  ng-model="tenantGroupPages.current"
                  ng-change="pageChange(tenantGroupPages.current)"

                  total-items="tenantGroupPages.total"
                  items-per-page="tenantGroupPages.size"
                  max-size="7"

                  boundary-links="true"

                  next-text="&rsaquo;"
                  last-text="&raquo;"
                  previous-text="&lsaquo;"
                  first-text="&laquo;"></ul>

    </div>
  </div>
</section>
<!-- / CE - camunda-admin-ui/client/scripts/pages/tenantEdit.html -->
